@container-header-margin-top:70px; // 导航栏高度
@container-color_1: #292a3a; // 主题色1
@container-color_2: #536976; // 主题色2
@container-header-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%); // 导航栏背景色
@container-header-active-color: rgb(68, 240, 68); // 导航栏激活颜色
@container-header-text-color: white; // 导航栏文本颜色
@container-header-text-font-size: 15px; // 导航栏文本大小
@container-header-margin: 20px; // 导航栏间隔

.container-header-margin {
  margin-top: @container-header-margin-top;
  margin-left: 8%;
  margin-right: 8%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding-bottom: 50px;
}
.container-header-margin:hover {
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
}

// 生成字体大小
.font-size(@n, @i, @d) when (@i <=@n) {
  .font-size-@{i}{
      font-size: (@i) + 0px;
  }
.font-size(@n, (@i + @d), @d);
}
.font-size(100, 1, 1);

// 外边距和内边距
.mt(@n, @i, @d) when (@i <=@n) {
  .mt-@{i}{
      margin-top: (@i) + 0px;
  }
.mt(@n, (@i + @d), @d);
}
.mt(1000, 10, 10);

.mb(@n, @i, @d) when (@i <=@n) {
  .mb-@{i}{
      margin-bottom: (@i) + 0px;
  }
.mb(@n, (@i + @d), @d);
}
.mb(1000, 10, 10);

.ml(@n, @i, @d) when (@i <=@n) {
  .ml-@{i}{
      margin-left: (@i) + 0px;
  }
.ml(@n, (@i + @d), @d);
}
.ml(1000, 10, 10);

.mr(@n, @i, @d) when (@i <=@n) {
  .mr-@{i}{
      margin-right: (@i) + 0px;
  }
.mr(@n, (@i + @d), @d);
}
.mr(1000, 10, 10);

.pt(@n, @i, @d) when (@i <=@n) {
  .pt-@{i}{
      padding-top: (@i) + 0px;
  }
.pt(@n, (@i + @d), @d);
}
.pt(1000, 10, 10);

.pb(@n, @i, @d) when (@i <=@n) {
  .pb-@{i}{
      padding-bottom: (@i) + 0px;
  }
.pb(@n, (@i + @d), @d);
}
.pb(1000, 10, 10);

.pl(@n, @i, @d) when (@i <=@n) {
  .pl-@{i}{
      padding-left: (@i) + 0px;
  }
.pl(@n, (@i + @d), @d);
}
.pl(1000, 10, 10);

.pr(@n, @i, @d) when (@i <=@n) {
  .pr-@{i}{
      padding-right: (@i) + 0px;
  }
.pr(@n, (@i + @d), @d);
}
.pr(1000, 10, 10);



